<template>
  <s-modal
    title="强制下线"
    :visible="visible"
    width="600px"
    ok-text="强制下线"
    :confirm-loading="confirmLoading"
    :closable="!confirmLoading"
    @ok="save()"
    @cancel="
      () => {
        if (!confirmLoading) {
          visible = false
        }
      }
    "
  >
    <div>
      <s-scroll>
        <s-form ref="form" :value="formValue">
          <s-form-item
            label="原因"
            size="big"
            name="msg"
            :rules="[
              { whitespace: true, required: true, message: '强制下线原因不能为空' },
              { max: 500, message: '最长为500' },
              { min: 10, message: '最少输入10个字符' }
            ]"
          >
            <s-text-area v-model="formValue.msg" allow-clear placeholder="请输入强制下线原因" />
          </s-form-item>
        </s-form>
      </s-scroll>
    </div>
  </s-modal>
</template>

<script>
export default {
  name: 'ForceDownline',

  data() {
    return {
      formValue: {},
      confirmLoading: false,
      visible: false
    }
  },
  methods: {
    open(id) {
      this.fakeValue = {}
      this.formValue.id = id
      this.visible = true
    },
    save() {
      const form = this.$refs.form
      form.validate((values) => {
        this.confirmLoading = true
        this.$api
          .POST(
            '/authority/activeUser/shotOff',
            { sessionId: this.formValue.id, msg: values.msg },
            { dataType: 'form' }
          )
          .then((res) => {
            this.confirmLoading = false
            this.visible = false
            this.$message.info(res.msg)
            this.$emit('success')
          })
          .catch(() => {
            this.confirmLoading = false
          })
      })
    }
  }
}
</script>

<style lang="less" scoped></style>
